<template>
	<Modal :title="title" v-model="visible" width="920" :footer-hide="true" @on-cancel="visible = false">
		<Card>			
			<div>山正标题：{{form.title}}</div>
			<Divider />
			<div>山正备注：{{form.remark}}</div>
			<Divider />
			<div>“山正票数比”：{{form.trueResultNum}}(正):{{form.falseResultNum}}(山)</div>
			<Divider />
			<div>发布者：{{form.publishUserName}}</div>
			<Divider />
			<p class="drawer-title">测评评论</p>
			<Row class="operation">
			  <Button @click="delAll" icon="md-trash">批量删除</Button>
			</Row>
			<Table
				:loading="loading"
				border
				:columns="columns"
				:data="form.comments"
				sortable="custom"
				@on-selection-change="showSelect"
				ref="table"
			></Table>
		</Card>
		
		<Modal title="回复评论" v-model="replyVisible" width="920" :footer-hide="true" @on-cancel="replyVisible = false">
			<Card>
				<Row><Table border :columns="replyColumns" :data="replyData" sortable="custom" ref="table"></Table></Row>
			</Card>
		</Modal>
	</Modal>
</template>

<script>
import { getSzAppraisalDetail, removeSzOrRealComment } from '@/api/index';
export default {
	name: 'identify',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object
		}
	},
	data() {
		return {
			visible: this.value,
			title: '',
			submitLoading: false,
			loading: false,
			replyVisible: false,
			maxHeight: 510,
			form: {},
			comments: [],
			columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center',
					fixed: 'left'
				},
				{
					type: 'index',
					width: 60,
					align: 'center',
					fixed: 'left'
				},
				{
					title: '评论人头像',
					key: 'publishUserAvatar',
					minWidth: 180,
					render: (h, params) => {
					  return h("Avatar", {
					    props: {
					      src: params.row.publishUserAvatar,
					    },
					  });
					},
				},
			  {
			    title: '评论人',
			    key: 'publishUserName',
			    minWidth: 120
			  },
				{
					title: '评论内容',
					key: 'commentContent',
					minWidth: 120
				},
				{
					title: '评论时间',
					key: 'commentTime',
					align: 'center',
					minWidth: 125
				},
				{
					title: '操作',
					key: 'action',
					width: 170,
					align: 'center',
					fixed: 'right',
					render: (h, params) => {
						return h('div', [
							h(
								'a',
								{
									on: {
										click: () => {
											this.reply(params.row);
										}
									}
								},
								'查看回复'
							),
							h('Divider', {
								props: {
									type: 'vertical'
								}
							}),
							h(
								'a',
								{
									on: {
										click: () => {
											this.remove(params.row);
										}
									}
								},
								'删除'
							)
						]);
					}
				}
			],
			replyData: [],
			replyColumns: [
				{
					title: '回复人头像',
					key: 'commentUserAvatar',
					minWidth: 120,
					render: (h, params) => {
					  return h("Avatar", {
					    props: {
					      src: params.row.commentUserAvatar,
					    },
					  });
					},
				},
				{
					title: '回复人昵称',
					key: 'commentUserName',
					minWidth: 180
				},
				{
					title: '评论内容',
					key: 'commentContent',
					minWidth: 180
				},
				{
					title: '评论时间',
					key: 'commentTime',
					minWidth: 180
				}
			]
		};
	},
	methods: {
		showSelect(e) {
			this.selectList = e;
			this.selectList.length = e.length;
		},
		reply(v) {
			if (v.commentReply === null) {
				this.$Message.warning('没有回复评论！');
				return
			}
			this.replyData = v.commentReply;
			this.replyVisible = true;
		},
		clearSelectAll() {
			this.$refs.table.selectAll(false);
		},
		remove(v) {
			this.$Modal.confirm({
				title: '确认删除',
				content: '您确认要删除该条帖子吗 ?',
				loading: true,
				onOk: () => {
					removeSzOrRealComment({ ids: v.commentId }).then(res => {
						this.$Modal.remove();
						if (res.success) {
							this.clearSelectAll();
							this.$Message.success('删除成功');
							this.init();
						}
					});
				}
			});
		},
		delAll() {
			if (this.selectList.length <= 0) {
				this.$Message.warning('您还未选择要删除的数据');
				return;
			}
			this.$Modal.confirm({
				title: '确认删除',
				content: '您确认要删除所选的 ' + this.selectList.length + ' 条数据?',
				loading: true,
				onOk: () => {
					let ids = '';
					this.selectList.forEach(function(e) {
						ids += e.commentId + ',';
					});
					ids = ids.substring(0, ids.length - 1);
					removeSzOrRealComment({ ids: ids }).then(res => {
						this.$Modal.remove();
						if (res.success) {
							this.$Message.success('删除成功');
							this.clearSelectAll();
							this.init();
						}
					});
				}
			});
		},
		setCurrentValue(value) {
			// console.log(this.form)
			if (value === this.visible) {
				return;
			}
			this.title = '山正详情';
			this.visible = value;
			this.init();
		},
		init() {
			getSzAppraisalDetail({id: this.data.appraisalId}).then(res => {
				if (res.success) {
					this.form = res.result;
				}
			})
		}
	},
	watch: {
		value(val) {
			this.setCurrentValue(val);
		},
		visible(value) {
			this.$emit('input', value);
		}
	},
	mounted() {
		// this.init();
	}
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
